import { useEffect, useState, useRef } from "react";
import { Link, useSearchParams } from "react-router-dom";
import { useSelector } from "react-redux";
import styles from "./index.module.scss";

declare const window: any;

const VideoArticlePage = () => {
  const [searchParams] = useSearchParams();
  const title = searchParams.get("title") || "视频文章";
  const grade = searchParams.get("grade") || "";
  const activityTitle = searchParams.get("activityTitle") || "";
  const systemConfig = useSelector((state: any) => state.systemConfig.value);
  
  const [playerInited, setPlayerInited] = useState(false);
  const playerInitedRef = useRef(false);

  useEffect(() => {
    document.title = `${title} · 儿童发展平台`;
  }, [title]);

  useEffect(() => {
    // 初始化视频播放器
    if (!playerInitedRef.current && window.DPlayer) {
      try {
        window.player = new window.DPlayer({
          container: document.getElementById("meedu-player-container"),
          autoplay: false,
          video: {
            url: "https://media.w3.org/2010/05/sintel/trailer.mp4", // 示例视频URL，实际使用时从参数获取
            pic: systemConfig?.playerPoster || "",
          },
        });
        playerInitedRef.current = true;
        setPlayerInited(true);
      } catch (e) {
        console.error("播放器初始化失败", e);
      }
    }

    return () => {
      if (window.player) {
        try {
          window.player.destroy();
        } catch {}
        playerInitedRef.current = false;
        setPlayerInited(false);
      }
    };
  }, [systemConfig]);

  return (
    <div className={styles.page}>
      <header className={styles.header}>
        <Link to="/child-development" aria-label="返回" className={styles.back}>
          <svg width="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M15 18l-6-6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </Link>
        <div className={styles.title}>{title}</div>
        <div style={{ width: 32 }} />
      </header>

      <div className={styles.content}>
        <div className={styles.breadcrumb}>
          {grade && <span className={styles.breadcrumbItem}>{grade}</span>}
          {activityTitle && (
            <>
              <span className={styles.breadcrumbSeparator}>/</span>
              <span className={styles.breadcrumbItem}>{activityTitle}</span>
            </>
          )}
          <span className={styles.breadcrumbSeparator}>/</span>
          <span className={styles.breadcrumbItem}>{title}</span>
        </div>

        {/* 视频播放器区域 */}
        <div className={styles.videoSection}>
          <div className={styles.videoWrapper}>
            <div id="meedu-player-container" className={styles.playerContainer}></div>
          </div>
        </div>

        {/* 文章内容区域 */}
        <div className={styles.article}>
          <h1 className={styles.articleTitle}>{title}</h1>
          <div className={styles.articleMeta}>
            <span className={styles.metaItem}>发布时间：2024-01-01</span>
            <span className={styles.metaItem}>阅读量：1234</span>
          </div>
          <div className={styles.articleContent}>
            <p>这里是文章内容区域。您可以根据实际需求替换为真实的文章内容。</p>
            <p>文章内容可以包含文字、图片、列表等多种格式。</p>
            <h2>章节标题</h2>
            <p>这里是章节的具体内容...</p>
            <ul>
              <li>列表项 1</li>
              <li>列表项 2</li>
              <li>列表项 3</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default VideoArticlePage;

